<script setup>
import { ref, onMounted } from 'vue'

const books = ref([])

onMounted(async () => {
  try {
    const response = await fetch('/books.json')
    books.value = await response.json()
  } catch (error) {
    console.error('加载图书列表失败:', error)
  }
})
</script>

<template>
  <div class="container">
    <div class="content">
      <h1 class="page-title">在读书目</h1>

      <div v-for="(book, index) in books" :key="index" class="book-item">
        <img
          :src="`/images/${index + 1}.jpg`"
          alt="封面"
          class="book-cover"
        />
        <div class="book-info">
          <h2 class="book-title">{{ book.title }}</h2>
          <p class="book-author">{{ book.author }}</p>
          <p class="book-venue">{{ book.venue }}</p>
          <a :href="book.link" target="_blank" rel="noopener" class="buy-link">购买链接</a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  padding: 20px;
  font-family:"main";
  background-color: #f8f9fa;
}
.content {
  max-width: 1000px;
  width: 100%;
}
.page-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}
.book-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}
.book-cover {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 20px;
}
.book-info {
  flex: 1;
}
.book-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}
.book-author,
.book-venue {
  color: #666;
  margin-bottom: 5px;
}
.buy-link {
  color: #1e88e5;
  text-decoration: underline;
  font-size: 14px;
}
</style>
